<template>
  <Header :user="user" />

  <!-- <Message type="error" :message="error.message" v-if="error.status"></Message> -->
  <Loader
    text="拼命加载中"
    background="rgba(0,0,0,0.8)"
    v-if="isloading"
  ></Loader>
  <!-- <column-list :Clist="list" /> -->
  <router-view />
  <footer
    v-show="$route.meta.isShow"
    class="text-center py-4 text-secondary bg-light mt-6"
  >
    <small>
      <ul class="list-inline mb-0">
        <li class="list-inline-item">© 2022 者也专栏</li>
        <li class="list-inline-item">课程</li>
        <li class="list-inline-item">文档</li>
        <li class="list-inline-item">联系</li>
        <li class="list-inline-item">更多</li>
      </ul>
    </small>
  </footer>
</template>

<script lang="ts">
import axios from 'axios'
import Header from './components/GlobalHeader.vue'
import { defineComponent, computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps } from './store/index'
import Loader from './components/Loader.vue'
import createMessage from './hooks/createMessage'
export default defineComponent({
  name: 'App',
  components: { Header, Loader },

  setup() {
    const store = useStore<GlobalDataProps>()
    const user = computed(() => store.state.user)

    const isloading = computed(() => store.state.loading)
    const error = computed(() => store.state.error)
    // onMounted(() => {
    //   if (token.value) {
    //     axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
    //     store.dispatch('getUserInfo').then((res) => {
    //       console.log(res)
    //     })
    //   }
    // })
    watch(
      () => error.value.status,
      (newvalue, old) => {
        console.log(newvalue, old)

        const { status, message } = error.value
        if (status && message) {
          createMessage(message, 'error')
        }
      }
    )

    return {
      isloading,
      user,
      error
    }
  }
})
</script>

<style></style>
